import React from 'react'

import axios from 'axios'
import * as API from '../../../uitls/mainPageApi'
import startLocation from './maptext'
// import GetAddress from './MainSetLocation'
import NavBar from '../../../components/TabBar/Navigation'
import MyAddressList from './MyAddressList/MyAddressList'
import './Address.css'
import { inject, observer } from 'mobx-react'
@inject('address')
@observer
class List extends React.Component {
    constructor() {
        super()
        this.state = {
            nowLocation: '',
            poisdata: [],
            aoisdata: {},
            isloading: false,
            MyAddressData: []
        }
    }
    componentDidMount() {
        this.getLocation()
        this.getmyaddress(1)
    }
    getmyaddress = (userid) => {
        this.axios({
            url: API.GET_MYADDRESS,
            method: 'get',
            params: { user_id: userid },

        }).then(data => {
            console.log(data)
            if (data.data.code === 200) {
                console.log(data.data.data)
                this.setState({
                    MyAddressData: data.data.data
                })
            }

        })
    }
    getaddress = (location) => {
        console.log(location)
        axios({
            url: `https://restapi.amap.com/v3/geocode/regeo?key=6c11990ede40ff54f4401b963120730f&location=${location}&poitype=&radius=1000&extensions=all&batch=false&roadlevel=0`,
            type: 'get',
            dataType: 'jsonp',
        }).then(data => {
            console.log(data)
            if (data.data.regeocode.aois.length !== 0) {
                console.log(data.data.regeocode.aois[0]); console.log(data.data.regeocode.pois);
                this.setState({
                    aoisdata: data.data.regeocode.aois[0],
                    poisdata: data.data.regeocode.pois,
                    isloading: false
                })
                console.log('asdasdasdasdsa')
                this.props.address.setAddress(data.data.regeocode.aois[0])
            }
            setTimeout(() => {
                this.setState({
                    isloading: false
                })
            }, 10000)



            // this.setState({ poisdata: data.data.regeocode.pois })

        })

    }

    getLocation = () => {
        new Promise(resolve => {
            this.setState({
                isloading: true
            })
            // console.log('刷新页面')
            resolve(11)
        }).then(data => {
            // console.log('获取定位')
            startLocation.then(({ lat, lng }) => {
                // console.log(lat);
                // console.log(lng);
                this.getaddress(`${lng},${lat}`)

            })
        })
    }

    selectAddress(addressData) {
        //保存到mobx
        // console.log(this.props)
        this.props.address.setAddress(addressData)
        this.props.history.push('/Home/Main')
    }
    render() {
        let { aoisdata, isloading, poisdata, MyAddressData } = this.state
        let showaddress = []
        if (aoisdata === undefined) {
            showaddress = <p>请选择当前位置</p>
        } else {
            showaddress = <p>{aoisdata.name}</p>
        }
        let showPoisdata = []
        if (poisdata.length < 1) {
            showPoisdata = '暂无附近地址信息'
        } else {
            showPoisdata = poisdata.map(item => {

                return <p className='nowraptext border-bottom-1' onClick={this.selectAddress.bind(this, item)} key={item.id}>{item.name}</p>
            })
        }
        return (
            /* html */
            <div className='address-content'>
                <div className='top-nav'>
                    <NavBar />
                    <div className='address-get'>
                        <span className='now-address nowraptext' onClick={this.selectAddress.bind(this, this.state.aoisdata)}>   {showaddress}</span>
                        <button className='get-address-btn' onClick={this.getLocation}><span className={isloading ? 'iconfont  icon-jiazai' : 'iconfont icon-dizhi'}></span> {isloading ? '定位中···' : '重新定位'}</button>
                    </div>
                </div>

                {/* <NavLink to='/Home/Addsite' className='right-top-btn'>新增地址</NavLink> */}

                <div className='myaddressList'>
                    <h3><span className='iconfont  icon-shouye'></span> 我的地址</h3>
                    <MyAddressList selectAddress={this.selectAddress} addressItem={MyAddressData} />
                </div>
                <div className='poisaddress'>
                    <h3><span className='iconfont  icon-dizhi2'></span> 附近地址</h3>
                    <div className='poisdata-box'>
                        {showPoisdata}
                    </div>
                </div>
            </div >
        )
    }
}

export default List